{extends file="insider_base.html"} 
{block name=function}
{function name="default_src"}{strip}
{$root}{$item.thumb|default:$item.image|default:setting('default_image')}
{/strip}{/function}

{function name="show_case_1" list=[] mdl=$mdl}
<ul class="list cms_case1 fallsList">
    {foreach $list as $item}
    <li><span>[{$item.date|date_format:'Y-m-d'}]</span><a href="{call view_link item=$item}">{$item.title}</a></li>
    {/foreach}
</ul>
{/function}

{function name="show_case_2" list=[] mdl=$mdl}
<ul class="list cms_case2 clearfix fallsList">
    {foreach $list as $item}
    <li class="{cycle values='odd,even'}">
        <div class="thumb">
            <a href="{call view_link item=$item}" style="background-image: url('{call default_src}');" class="coverBg cms_tran"><img  src="{call default_src}" alt="{$item.title}" class="hidden"/></a>
        </div>
        <h4><a href="{call view_link item=$item}">{$item.title}</a></h4>
        <p>{call trim_content html=$item.summary|nl2br|default:$item.content length=100}</p>
    </li>
    {/foreach}
</ul>
{/function}

{function name="show_case_3" list=[] mdl=$mdl}
<ul class="grid cms_case3 clearfix fallsList">
    {foreach $list as $item}
    <li>
        <div class="thumb">
            <a href="{call view_link item=$item}" style="background-image: url('{call default_src}');" class="coverBg cms_tran">
                <img  src="{call default_src}" alt="{$item.title}" class="hidden"/>
                <div class="bgcolor cms_tran_in"></div>
                <div class="mask cms_tran">
                    <i class="line_l cms_tran"></i>
                    <i class="line_t cms_tran"></i>
                    <i class="line_r cms_tran"></i>
                    <i class="line_b cms_tran"></i>
                </div>
                <h4 class="cms_tran {cycle values='odd,even'}">{$item.title}</h4>
            </a>            
        </div>
    </li>
    {/foreach}
</ul>
{/function}

{function name="show_case_4" list=[] mdl=$mdl}
<ul class="grid cms_case4 clearfix fallsList">
    {foreach $list as $item}
    <li class="ite_{$item@iteration%4} {cycle values='odd,even'}">
        {if $item@iteration%2==1}<h4 class="cms_tran">{$item.title}</h4>{/if}
        <div class="thumb">
            <a href="{call view_link item=$item}" style="background-image: url('{call default_src}');" class="coverBg cms_tran"><img  src="{call default_src}" alt="{$item.title}" class="hidden"/></a>
        </div>
        {if $item@iteration%2==0}<h4 class="cms_tran">{$item.title}</h4>{/if}
        <a class="mask cms_tran" href="{call view_link item=$item}"></a>
    </li>
    {/foreach}
</ul>
{/function}

{function name="show_case_5" list=[] mdl=$mdl}
<div class="cms_case5">
    <ul class="grid clearfix fallsList">
        {foreach $list as $item}
        <li>
            <a href="{call view_link item=$item}">
                <div class="thumb coverBg cms_tran" style="background-image: url('{call default_src}');"></div>
                <div class="bg cms_tran"></div>
                <span class="link cms_tran"><i class="fa fa-link"></i></span>
                <h4 class="cms_tran">{$item.title}</h4>
            </a>
        </li>
        {/foreach}
    </ul>
</div>
{/function}

{function name="show_case_6" list=[] mdl=$mdl}
<div class="cms_case6">
    <ul class="grid  clearfix fallsList">
        {foreach $list as $item}
        <li>
            <a href="{call view_link item=$item}">
                <div class="thumb coverBg cms_tran" style="background-image: url('{call default_src}');"></div>
                <div class="bg cms_tran"></div>
                <h4 class="cms_tran">{$item.title}</h4>
                <i class="l line cms_tran"></i><i class="r line cms_tran"></i>
            </a>
        </li>
        {/foreach}
    </ul>
</div>
{/function}

{function name="show_case_7" list=[] mdl=$mdl}
<div class="cms_case7">
    <ul class="grid  clearfix fallsList">
        {foreach $list as $item}
        <li>
            <a href="{call view_link item=$item}">
                <div class="thumb coverBg cms_tran" style="background-image: url('{call default_src}');"></div>
                <div class="bg cms_tran"></div>
                <h4 class="cms_tran">{$item.title}</h4>
                <i class="l line cms_tran"></i><i class="r line cms_tran"></i>
            </a>
        </li>
        {/foreach}
    </ul>
</div>
{/function}

{function name="show_case_8" list=[] mdl=$mdl}
<script type="text/javascript" src="{$absroot}js/jaliswall.js"></script>
<div class="cms_case8 clearfix fallsList">
    {foreach $list as $item}
    <a class="article" href="{call view_link item=$item}">
        <img  src="{call default_src}" alt="{$item.title}"/>
        <h4>{$item.title}</h4>
    </a>
    {/foreach}
</div>
<script>
$(function(){
	$('.cms_case8').jaliswall({ item: '.article' });
});
</script>
{/function}

{function name="show_case_9" list=[] mdl=$mdl}
<div class="cms_case9">
    <ul class="grid fallsList">
        {foreach $list as $item}
        <li>
            <div class="thumbBox">
                <div class="thumb cms_tran"><a href="{call view_link item=$item}" class="coverBg cms_tran" style="background-image: url({call default_src});"><img  src="{call default_src}" alt="{$item.title}" class="hidden"/></a></div>
                <div class="mask cms_tran">
                    <a class="more" href="{call view_link item=$item}">LINK</a>
                    <a class="item_tit" href="{call view_link item=$item}">{$item.title}</a>
                </div>
            </div>
        </li>
        {/foreach}
    </ul>
</div>
{/function}

{function name="show_case_10" list=[] mdl=$mdl}
<div class="cms_case10">
    <ul class="grid fallsList">
        {foreach $list as $item}
        <li class="cms_tran">
            <div class="thumbBox" >
                <div class="thumb coverBg cms_tran " style="background-image: url({call default_src});"></div>
                <div class="mask cms_tran">
                    <div class="coverBg cms_tran"></div>
                    <h2 class="reset">{$item.title}</h2>
                    <p class="reset">
                        {call trim_content html=$item.summary|nl2br|default:$item.content length=100}
                    </p>
                </div>
                <a href="{call view_link item=$item}" class="view"><img  src="{call default_src}" alt="{$item.title}" class="hidden"/></a>
            </div>
        </li>
        {/foreach}
    </ul>
</div>
{/function}

{function name="show_case_11" list=[] mdl=$mdl}
<div class="cms_case11">
    <ul class="list fallsList">
        {foreach $list as $item}
        <li class="{if $item@iteration%2==0}odd{else}even{/if} cms_tran clearfix">
            <div class="thumb"><a href="{call view_link item=$item}" class="cms_tran coverBg" style="background-image: url({call default_src});"><img src="{call default_src}" alt="{$item.title}" class="hidden"/></a></div>
            <div class="item_con">
                <div class="item_tit"><a href="{call view_link item=$item}">{$item.title}</a></div>
                <p class="reset" >
                    {call trim_content html=$item.summary|nl2br|default:$item.content length=100}
                </p>
                <div class="item_more"><a href="{call view_link item=$item}" class="button--aylen button">查看详情</a></div>
            </div>
        </li>
        {/foreach}
    </ul>
</div>
{/function}

{function name="show_case_12" list=[] mdl=$mdl}
<div class="cms_case12">
    <ul class="list fallsList">
    {foreach $list as $item}
    <li>            
        <div class="thumb"><a href="{call view_link item=$item}" class="cms_tran coverBg" style="background-image: url({call default_src});"><img src="{call default_src}" alt="{$item.title}" class="hidden"/></a></div>
        <div class="item_con">
            <div class="item_tit"><a href="{call view_link item=$item}">{$item.title}</a></div> 
            <p class="reset" >
            {call trim_content html=$item.summary|nl2br|default:$item.content length=100}
            </p>                 
        </div>
        <div class="item_info">
            <a href="{call view_link item=$item}">查看详情 &gt;</a>
            <span class="en-font">{$item.date}</span>
        </div>
    </li>
    {/foreach}
    </ul>
</div>
{/function}

{function name="show_case_13" list=[] mdl=$mdl}
<div class="cms_case13">
    <ul class="list fallsList">
        {foreach $list as $item}
        <li class="cms_tran clearfix {if $item@first}first{/if}">
            <div class="item_init">
                <div class="thumb"><a href="{call view_link item=$item}" class="cms_tran coverBg" style="background-image: url({call default_src});"><img src="{call default_src}" alt="{$item.title}" class="hidden"/></a></div>
                <div class="item_con">
                    <div class="item_tit" ><span class="fr">{$item.date}</span><a href="{call view_link item=$item}">{$item.title}</a></div>
                    <p class="reset">
                        {call trim_content html=$item.summary|nl2br|default:$item.content length=100}
                    </p>
                    <div class="item_more"><a href="{call view_link item=$item}" class="button--aylen button">查看详情</a></div>
                </div>
            </div>
        </li>
        {/foreach}
    </ul>
</div>
{/function}

{function name="show_case_14" list=[] mdl=$mdl}
<div class="cms_case14">
    <ul class="grid fallsList">
        {foreach $list as $item}
        <li class="cms_tran clearfix {if $item@first}first{/if}">
            <div class="item_init">
                <div class="thumb"><a href="{call view_link item=$item}" class="cms_tran  coverBg" style="background-image: url({call default_src});"><img src="{call default_src}" alt="{$item.title}" class="hidden"/></a></div>
                <div class="item_con">
                    <div class="item_tit" ><a href="{call view_link item=$item}">{$item.title}</a></div>
                    <p class="reset" >
                        {call trim_content html=$item.summary|nl2br|default:$item.content length=100}
                    </p>
                    <div class="item_more"><a href="{call view_link item=$item}" class="button--aylen button">查看详情</a></div>
                </div>
            </div>
        </li>
        {/foreach}
    </ul>
</div> 
{/function}

{function name="show_case_15" list=[] mdl=$mdl}
<div class="cms_case15">
    <ul class="grid fallsList">
        {foreach $list as $item}
        <li class="cms_tran clearfix {if $item@first}first{/if}">
            <div class="item_init">
                <div class="item_con">
                    <div class="date en-font">Date：{$item.date|date_format:'Y年m月d日'}</div>
                    <div class="item_tit" ><a href="{call view_link item=$item}">{$item.title}</a></div>
                    <div class="thumb"><a href="{call view_link item=$item}" class="cms_tran coverBg" style="background-image: url({call default_src});"><img src="{call default_src}" alt="{$item.title}" class="hidden"/></a></div>
                    <p class="reset" >
                        {call trim_content html=$item.summary|nl2br|default:$item.content length=100}
                    </p>
                    <div class="item_more"><a href="{call view_link item=$item}" class="button--aylen button">查看详情</a></div>
                </div>
            </div>
        </li>
        {/foreach}
    </ul>
</div> 
{/function}

{function name="show_case_16" list=[] mdl=$mdl}
<div class="cms_case16">
    <ul class="list fallsList clearfix">
        {foreach $list as $item}
        <li class="transition">
            <div class="item_init">
                <div class="item_tit"><a href="{call view_link item=$item}" class="more fr">查看详情</a><a href="{call view_link item=$item}">{$item.title}</a></div>
                <div class="item_con">
                {call trim_content html=$item.summary|nl2br|default:$item.content length=100}
                </div>
            </div>
        </li>
        {/foreach}
    </ul>
</div>
{/function}

{function name="show_case_17" list=[] mdl=$mdl}
<script type="text/javascript" src="{$absroot}js/minigrid.js"></script>
<script type="text/javascript" src="{$absroot}js/dynamics.js"></script>

 <div class="cms_case17 clearfix relative fallsList">    
    {foreach $list as $item}
    <div class="grid-item">
        <a class="article" href="{call view_link item=$item}">
            <img  src="{call default_src}" alt="{$item.title}"/>
            <h4>{$item.title}</h4>
        </a>
    </div>
    {/foreach}
</div>
<script>
$(function(){
    function animate(item, x, y, index) {
        dynamics.animate(item, {
            translateX: x,
            translateY: y,
            opacity: 1
        }, {
        type: dynamics.spring,
        duration: 800,
        frequency: 120,
        delay: 100 + index * 30
        });
    }
    
    minigrid('.cms_case17', '.grid-item', 12, animate);
    
    $(window).resize(function(){
         minigrid('.cms_case17', '.grid-item', 12, animate);
    })
});
</script>
{/function}


{*在这里定义自己的列表样式*}

{/block}

{block name=insider}
<div class="fallsBox">
    <div id="insider_show">
        {$list_style=$menu_data.list_style|default:'show_case_1'}
        {call $list_style list=$list}
    </div>    
    <div id="cms_page" class="clearfix fallsPage">
        <div class="cms_page_relative clearfix">{$render}</div>
    </div>
</div>
{$page_style = $menu_data.page_style}
{if $render && ($page_style == 2 || $page_style == 3)}
<div id="loadMark"><img src="{$absroot}images/home/loader.gif"/></div>
<div id="fallsHidden" class="hidden"></div>
<script type="text/javascript">
var direct = -1;
var sign = 0;
var is_load = true;
var footTop = 0 ;
var is_over = false ;

function scrollWin(){
    $(window).scroll(function(){
        if (!is_load) return false;
        var winHei = winHei|| $(window).height();
        if($('.fallsBox').length){
            if(!is_over) $('#loadMark').show() ;
            
            var scrtop =document.documentElement.scrollTop || document.body.scrollTop;                  
            if (scrtop > sign) { 
                sign = scrtop;
                direct = -1;     
            }
            if (scrtop < sign) {   
                sign = scrtop;         
                direct = 1;
            } 
            if(direct == -1){            
                footTop =  $('#loadMark').offset().top;
                var midTop = footTop - scrtop ;
                if(midTop-20<winHei){                 
                    loadFalls()
                }
            }
        }
    })
}

function loadFalls(){
    if(!is_load) return false ; 
    is_load = false ;
    if(!$('#fallsHidden').find('.pagination').length){
        $('#fallsHidden').html($('.fallsPage').html());
        $('.fallsPage').html('');
    }
    var pages   =  $('#fallsHidden').find('.pagination').find('li').not(':last,:first').length ;
    var nowPage =  $('#fallsHidden').find('.pagination').find('li.active').index()>= 0 ? $('#fallsHidden').find('.pagination').find('li.active').index(): 0 ;
    
    
    if(nowPage>=pages) {
        is_over = true ;
        $('#loadMark').html('已经没有啦(*^__^*) ').fadeOut(6000) ;
        return false ;
    }
    var href    =  $('#fallsHidden').find('.pagination').find('li:eq('+(nowPage+1)+')').find('a').attr('href') ;
    $('#fallsHidden').load(href + ' .fallsBox',function(){
        var list    = $('#fallsHidden').find('.fallsList').html();
        $(list).appendTo($('.fallsBox').find('.fallsList'));
        loadJs() ;
        is_load = true ;
    })
}
//因为load不能把js加载过来，所以每次加载数据完成后需要执行的js单独在这里再执行一次
function loadJs(){
    if ($('.cms_case8').length) {
        $('.cms_case8').jaliswall({ item: '.article' });
    }
    if ($('.cms_case17').length) {
       $(window).trigger('resize');
    }
}

$(document).ready(function(){
    $('.fallsPage').hide();
    $('#loadMark').show();
    $('body').on('click', '#loadMark', function(){
        loadFalls()
    })
    {if $page_style == 3}
    scrollWin()
    {/if}
})
</script>
{/if}
{/block}